<script setup lang="ts">
import { ref } from 'vue'

// 表单数据
const form = ref({
  name: '',
  status: '',
  active: false,
  agree: false
})

// 选项数据
const statusOptions = [
  { label: '在线', value: 'online' },
  { label: '离线', value: 'offline' },
  { label: '忙碌', value: 'busy' }
]

// 按钮点击事件
const handleClick = () => {
  console.log('表单数据:', form.value)
}
</script>

<template>
  <div class="demo-container">
    <v-card title="Vemix UI 组件演示" :bordered="true" :hoverable="true" style="max-width: 600px; margin: 20px auto;">
      <div>
        <!-- Button 组件 -->
        <div>
          <h3 style="margin-bottom: 10px;">按钮组件</h3>
          <div style="display: flex; gap: 10px;">
            <v-button type="primary">主要按钮</v-button>
            <v-button>默认按钮</v-button>
            <v-button danger>危险按钮</v-button>
            <v-button :loading="false">加载中</v-button>
          </div>
        </div>

        <!-- Input 组件 -->
        <div>
          <h3 style="margin-bottom: 10px;">输入框组件</h3>
          <v-input
            v-model="form.name"
            placeholder="请输入用户名"
            clearable
            prefix="user"
            :disabled="false"
            style="width: 100%;"
          />
        </div>

        <!-- Select 组件 -->
        <div>
          <h3 style="margin-bottom: 10px;">选择器组件</h3>
          <v-select
            v-model="form.status"
            :options="statusOptions"
            placeholder="请选择状态"
            clearable
            filterable
            style="width: 100%;"
          />
        </div>

        <!-- Switch 组件 -->
        <div>
          <h3 style="margin-bottom: 10px;">开关组件</h3>
          <div>
            <v-switch v-model="form.active" />
            <span>{{ form.active ? '启用' : '禁用' }}</span>
          </div>
        </div>

        <!-- Checkbox 组件 -->
        <div>
          <h3 style="margin-bottom: 10px;">复选框组件</h3>
          <v-checkbox v-model="form.agree">同意用户协议</v-checkbox>
        </div>

        <!-- 提交按钮 -->
        <v-button type="primary" @click="handleClick" :disabled="!form.agree">
          提交
        </v-button>
      </div>
    </v-card>
  </div>
</template>

<style scoped>
.demo-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
</style>
